<template>
  <el-form class="component-click-statics" v-if="pages">
    <div class="pages-con" v-if="siteAttrs">
      <div class="pages" :key="getCurrentPage.id" :style="pageHei">
        <div class="page-con" :style="siteStyles_">
          <group-component
            :item="getCurrentPage"
            :pageId="-1"
            :popId="-1"
            class="page"
            :style="pageStyles"
          ></group-component>
        </div>
      </div>
      <div class="page-btns-con">
        <el-button-group v-if="siteAttrs">
          <el-button class="page-btn" @click.stop="onPrePage">上一页</el-button>
          <el-button type="text" class="page-number">{{ pageNumber }}</el-button>
          <el-button class="page-btn" @click.stop="onNextPage">下一页</el-button>
        </el-button-group>
      </div>
    </div>
  </el-form>
</template>

<script>
import GroupComponent from "@/components/global/group-component.vue";
import DropdownNormal from "@/views/components/edit/dropdown-normal.vue";
import { bgPositionStyle, getPxOVwByValue } from "@/utils/";
import { PAGE_TYPE } from "@/const";
import { PREVIEW_WIDTH } from "@/const/web/index";
import { reactive } from "vue";
import { useWebSiteStore } from "@/store/web/site";
import { useWebDataAnalysisStore } from "@/store/web/data-analysis";

const useWebDataAnalysis = useWebDataAnalysisStore();
const useWebSite = useWebSiteStore();
export default {
  setup() {
    const state = reactive({
      pageNumber: "1/1",
    });
    const state_ = {
      pageIndex: 0,
      dates: [
        { name: "全部", value: 0 },
        { name: "一天内", value: 1 },
        { name: "三天内", value: 3 },
        { name: "七天内", value: 7 },
      ],
      date: 0,
    };
    _.merge(state, state_);
    return state;
  },
  components: {
    GroupComponent,
    DropdownNormal,
  },
  props: ["site_id"],
  computed: {
    siteAttrs() {
      return useWebSite.siteData.attrs;
    },
    pages() {
      return useWebSite.siteData.pages;
    },
    pageHei() {
      let styles_ = {};
      if (this.siteAttrs && this.siteAttrs.pageType == PAGE_TYPE.single) {
        styles_.overflow = "hidden";
      } else {
        styles_.overflowY = "auto";
      }
      return styles_;
    },
    getCurrentPage() {
      return this.pages[this.pageIndex];
    },
    siteStyles_() {
      let page = this.getCurrentPage;
      let styles_ = {
        backgroundColor: this.siteAttrs.backgroundColor,
        backgroundImage: "url(" + this.siteAttrs.bgUrl + ")",
      };
      let previewScale = PREVIEW_WIDTH / page.attrs.width;
      styles_.height = getPxOVwByValue(page.attrs.height * previewScale);
      styles_.width = getPxOVwByValue(page.attrs.width * previewScale);
      return styles_;
    },
    pageStyles() {
      let page = this.getCurrentPage;
      let pageStyle = _.cloneDeep(this.getPageStyles(page));
      let previewScale = PREVIEW_WIDTH / page.attrs.width;
      pageStyle.transform = "scale(" + previewScale + ")";
      return pageStyle;
    },
  },
  methods: {
    getPageStyles(page) {
      const pageStyles_ = {
        backgroundColor: page.attrs.backgroundColor,
        backgroundImage: "url(" + page.attrs.bgUrl + ")",
        width: getPxOVwByValue(page.attrs.width),
        height: getPxOVwByValue(page.attrs.height),
      };
      bgPositionStyle(pageStyles_, page.attrs.bgPositionRepeatType);
      return pageStyles_;
    },
    onPrePage() {
      this.pageIndex--;
      if (this.pageIndex <= 0) {
        this.pageIndex = 0;
      }
      this.refreshPage();
    },
    onNextPage() {
      this.pageIndex++;
      if (this.pageIndex >= this.pages.length) {
        this.pageIndex = this.pages.length - 1;
      }
      this.refreshPage();
    },
    refreshPage() {
      if (!this.pages) {
        return;
      }
      this.pageNumber = this.pageIndex + 1 + "/" + this.pages.length;
    },
  },
  updated() {
    this.refreshPage();
  },
};
</script>
<style lang="scss">
.pages-con {
  background-color: #ffffff;
  padding: 20px;
  margin-right: 20px;

  .page-btns-con {
    display: flex;
    justify-content: center;
  }

  .pages {
    width: 260px;
    height: 420px;
    overflow: hidden;
    overflow-y: auto;

    .page {
      transform-origin: 0 0;
      position: relative;
      background-size: auto;
      background-position: center center;
      background-repeat: repeat;
      padding-right: 10px;
    }
  }
  .el-button {
    border-radius: 0;
  }
  .el-button-group {
    margin-top: 20px;
  }
  .page-number {
    padding-left: 10px;
    padding-right: 10px;
  }
  .page-btn {
    border: 1px solid #43475c;
    padding: 8px 28px;
  }
}
</style>
